<template>
	<view>
		<view v-if="hasGroup" class="pos-rel mt-48 plr-24">
			<view class="promotion-group">
				<view class="flex-a">
					<image :src="imgBaseUrl + 'avatar.png'" class="user-avatar" />
					<view class="ml-16">
						<view class="fs-32 font-bold">华小乖团队</view>
						<view class="mt-4 c-grey-86">早睡晚起身体健康</view>
					</view>
				</view>
				<view class="popup-group">
					<image :src="imgBaseUrl + 'icon-group.png'" class="icon-32" />
					<text class="ml-4 bd-right">团长：漂亮的小乖吃喝玩乐集</text>
					<text class="ml-48">1928727727</text>
				</view>
				<view class="bottom-menu">
					<view class="menu-item">
						<image class="menu-icon" :src="imgBaseUrl + 'invite-member.png'" />
						<text class="menu-title">邀请成员</text>
					</view>
					<view class="menu-item" @click="navigateTo('/pages/promotion/group/member')">
						<image class="menu-icon" :src="imgBaseUrl + 'manage-member.png'" />
						<text class="menu-title">成员管理</text>
					</view>
				</view>
			</view>
			<view class="mt-16 zjy-card-form" @click="navigateTo('/pages/promotion/ranks')">
				<view class="flex-a space-between">
					<view class="zjy-card-title">团队业绩</view>
					<view class="flex-a c-grey-86 fs-26">
						<text>明细</text>
						<text class="arrow-right ml-8"></text>
					</view>
				</view>
				<view class="flex mt-24">
					<view class="block-corner">
						<view class="title">销售额 (112单)</view>
						<view class="value">1,221.1</view>
						<image :src="imgBaseUrl + 'corner-sale.png'" class="icon" />
					</view>
					<view class="block-corner">
						<view class="title">团队排行</view>
						<view class="value">91</view>
						<image :src="imgBaseUrl + 'corner-rank.png'" class="icon" />
					</view>
				</view>
			</view>
			<view class="mt-16 zjy-card-form">
				<view class="flex-a space-between">
					<view class="zjy-card-title">个人业绩</view>
					<view class="flex-a c-grey-86 fs-26">
						<text>明细</text>
						<text class="arrow-right ml-8"></text>
					</view>
				</view>
				<view class="flex mt-24">
					<view class="block-corner">
						<view class="title">销售额 (112单)</view>
						<view class="value">1,221.1</view>
						<image :src="imgBaseUrl + 'corner-sale.png'" class="icon" />
					</view>
					<view class="block-corner">
						<view class="title">团队排行</view>
						<view class="value">91</view>
						<image :src="imgBaseUrl + 'corner-rank.png'" class="icon" />
					</view>
				</view>
			</view>
		</view>
		<view
			v-else
			class="empty-group"
			:style="{ top: `calc(${commonStore.statusBarHeight + commonStore.navbarHeight}px + 48rpx)` }"
		>
			<image :src="imgBaseUrl + 'empty-group.png'" class="empty-img" />
			<view class="mt-20 c-grey-86">您暂时还没有所属团队，赶快加入一个吧</view>
			<view class="flex mt-40">
				<zjy-button type="line" size="medium" width="192" @click="navigateTo('/pages/promotion/group/create')">
					创建团队
				</zjy-button>
				<view class="ml-24">
					<zjy-button size="medium" width="192" @click="navigateTo('/pages/promotion/group/list')">
						申请加入
					</zjy-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import useCommonStore from "@/store/common"
import { navigateTo } from "@/utils/page-redirect"

const imgBaseUrl = inject("imgBaseUrl")
const commonStore = useCommonStore()

const hasGroup = ref(true)
</script>
<style lang="scss" scoped>
.promotion-group {
	padding: 40rpx 40rpx 0;
	width: 100%;
	height: 362rpx;
	background: url(#{$imgBaseUrl}promotion-group-bg.png);
	background-position: center center;
	background-size: cover;
	position: relative;
	.popup-group {
		width: 100%;
		height: 90rpx;
		background: url(#{$imgBaseUrl}promotion-group-popup.png);
		background-position: center center;
		background-size: cover;
		display: flex;
		align-items: center;
		padding: 34rpx 24rpx 24rpx;
		margin-top: 10rpx;
		font-size: 26rpx;
		color: $c-black-_7;
		.bd-right {
			position: relative;
			&::after {
				position: absolute;
				content: "";
				top: 4rpx;
				bottom: 4rpx;
				width: 1rpx;
				background: #edebdd;
				right: -24rpx;
			}
		}
	}
	.bottom-menu {
		position: absolute;
		bottom: 28rpx;
		left: 0;
		right: 0;
		display: flex;
		.menu-item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			.menu-icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
			.menu-title {
				font-size: 28rpx;
			}
			& + .menu-item {
				position: relative;
				&::before {
					position: absolute;
					content: "";
					left: 0;
					top: 6rpx;
					bottom: 6rpx;
					width: 1rpx;
					background: #e5e6eb;
				}
			}
		}
	}
}
.block-corner {
	flex: 1;
	height: 136rpx;
	padding: 24rpx 32rpx 0 26rpx;
	background: rgba(237, 236, 228, 0.2);
	border-radius: 16rpx;
	position: relative;
	overflow: hidden;
	& + .block-corner {
		margin-left: 18rpx;
	}
	.title {
		font-size: 24rpx;
		color: $c-grey-86;
	}
	.value {
		font-size: 32rpx;
		font-weight: bold;
		font-family: "OPPO";
		margin-top: 8rpx;
	}
	image {
		position: absolute;
		width: 88rpx;
		height: 88rpx;
		right: 0;
		bottom: -12rpx;
	}
}
.empty-group {
	position: absolute;
	left: 24rpx;
	right: 24rpx;
	bottom: 48rpx;
	background: $c-white;
	box-shadow: inset 0 0 10rpx 0 $c-white;
	border: 2rpx solid $c-white;
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 258rpx;
	.empty-img {
		width: 320rpx;
		height: 320rpx;
	}
}
</style>
